<template>
    <div>
        <div class="ui container mb-60"  v-for="(willNotUse,index) in basicinfo.icon.length" :key="index">
            <div class="ui dividing small header"><i class="ui icon" :class="basicinfo.icon[index]"></i> {{basicinfo.label[index]}}</div>
            <div class="content">
                <span>{{basicinfo.content[index] ? basicinfo.content[index] : '暂无' }}</span><a style="float: right" href="javascript:void(0)" @click="">修改</a>
            </div>
        </div>
    </div>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
export default {
    computed: {
        ...mapState(['user'])
    },
    data () {
        return {
            basicinfo: {
                icon: ['magic', 'quote left'],
                label: ['昵称', '一句话描述'],
                content: []
            }
        }
    },
    computed: {
        ...mapState(['user'])
    },
    methods: {
        ...mapMutations(['SET_USERINFO'])
    },
    watch: {
        'user.nickname': function () {
            this.basicinfo.content = [this.user.nickname, this.user.memo]
        }
    }
}
</script>
<style scoped lang="stylus">
.ui.container.mb-60
    margin-bottom 60px

$header_icon_size = 100px

.img-con
        width $header_icon_size
        height $header_icon_size
        border-radius ($header_icon_size / 2)
        overflow hidden
        display inline-block
        vertical-align middle
        img
            width 100%
            height 100%
.iamge-uploader__area
    border: 1px dashed grey
    padding 50px 20px
</style>
